
import React from 'react';
import { connect } from 'react-redux';
// import { parseQueryString } from './../../utils';
import * as actions from './../../actions/a_schedule';
import { TimeIcon, LecturerIcon, IsFinishedIcon} from './../../icons';
import moment from 'moment';
import classnames from 'classnames';
class ScheduleView extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isSignIn : 0,
      periodId: ''
    }
  }
  componentDidMount() {
    document.title = '日程表';

    let {
      match
    } = this.props;
    let periodId = match.params&&match.params.periodId;
    let isSignIn = match.params&&match.params.isSignIn;
    this.setState({
      isSignIn : isSignIn,
      periodId: periodId
    })
    this.props.getSchedules(this.state.periodId);
  }
  render() {
    let {
      state = {},
    } = this.props;
    let {
      data,
      page
    } = state;
    let size = page.size || 15;
    let number = page.number || 0;
    let total = page.total || 0;
    let canLoadMore = (number < (parseInt(total/size, 10)));
    let result = [];
    for (let key in data) {
      if (data.hasOwnProperty(key)) {
        result.push({
          id: key,
          data: data[key]
        })
      }
    }
    return (
      <div className='schedule'>
        {
          result.map((item, index) => {
            let sections = item.data || [];
            let weekDay = moment(item.id).format('d');
            let weekArr =['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            return (
              <div className='day' key={item.id}>
                <div className='top'>
                  <h2>第{index+1}天</h2>
                  <span className='date'><em>{moment(item.id).format('MM月DD日')}</em><em>{weekArr[weekDay]}</em></span>
                </div>
                {
                  sections.map((piece, i) => { // 用后台返回数据时要改一下key
                    return (
                      <section key={piece.id} className={piece.isFinished ? 'finished':''}>
                        <header>{piece.subject}</header>
                        <main>
                          <p><TimeIcon />开课时间: {moment(piece.beginTime).format('hh:mm')}-{moment(piece.endTime).format('hh:mm')}</p>
                          <p><LecturerIcon />讲师: {piece.lecturerName}</p>
                        </main>
                        { // isFinished  0 未结束  1  结束
                        // 已签到的  才有  课件
                          piece.isFinished === 1 && <aside><IsFinishedIcon /></aside>
                        }
                        {// 这里需要判断  请求回来的  具体课件有没有, 然后决定显示与否
                          this.state.isSignIn === '1' &&  <footer><button className='check-file'>查看课件</button></footer>
                        }
                      </section>
                    )
                  })
                }      
              </div>
            )
          })
        }
        <p className={classnames('more', {'canLoad': canLoadMore})}><button
          onClick={ () => {
            if (canLoadMore) {
              this.props.moreSchedules(this.state.periodId);
            }
          }}
        >点击查看更多</button></p>
      </div>
    )
  }
}

export default connect( (store) => {
  return {
    ...store.schedule
  }
}, {
  ...actions
})(ScheduleView);